<template>
  <!-- 语法： v-model="变量名" -->
  <!-- 作用： 双向绑定： 1. 数据变化，页面自动变化  2. 页面变化， 数据自动变化-->
  <!-- 场景:  1. 收集用户输入内容  2. 回填表单数据 -->
  <div>
    <h1>{{ name }}</h1>
    用户名: <input type="text" v-model="name" /> <br />
    密码: <input type="text" v-model="password" /> <br />

    <button @click="submit">登录</button>
    <button @click="resetFn">重置</button>

    <hr />
    <!-- v-bind：是单项绑定，数据绑定到视图 -->
    <input type="text" :value="name" />

    <!-- v-model 默认只能用在表单元素上 -->
    <!--❌ <div v-model="name"></div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      password: "",
    };
  },
  methods: {
    submit() {
      console.log("  ----->  ", this.name);
      console.log("  ----->  ", this.password);
    },
    resetFn() {
      this.name = "";
      this.password = "";
    },
  },
};
</script>

<style></style>
